<template>
  <div class="wrap">
    <!-- 创建新房间并进入 -->
    <v-dialog v-model="createRoomDialog" width="500" persistent>
        <v-card>
          <v-card-title class="text-h5"> 创建房间 </v-card-title>
          <v-sheet elevation="0" class="px-6 pt-2">
            <v-text-field
              label="会议时长"
              placeholder="请输入会议时长"
              outlined
              dense
              type="number"
              max="12"
              min="1"
              v-Int
              suffix="h"
              v-model="roomTime"
              @input="verifyRoomTime"
            ></v-text-field>
          </v-sheet>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="createRoomDialog = false">
              取消
            </v-btn>
            <v-btn color="primary" text @click="createRoom"> 确定 </v-btn>
          </v-card-actions>
        </v-card>
    </v-dialog>
    <!-- 加入房间的弹窗 -->
    <v-dialog v-model="enterRoomDialog" width="500" persistent>
      <v-card>
        <v-card-title class="text-h5"> 加入房间 </v-card-title>
        <v-sheet elevation="0" class="px-6 pt-2">
          <v-otp-input
            ref="roomId"
            v-model="roomId"
            :length="6"
            @finish="enterRoom"
          ></v-otp-input>
        </v-sheet>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="enterRoomDialog = false">
            取消
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <div class="intro"><span class="intro-text">使用Leazer Fspace，快速开始您的自由会议</span><span class="intro-emo">🎉</span></div>
    <div class="meeting-oper">
      <div class="create-meeting" @click="createRoomDialog = true">
        <v-icon style="font-size: 112px">add</v-icon>
      </div>
      <div class="join-meeting" @click="openJoinMeetingDialog">
        <v-icon style="font-size: 112px" dark>3p</v-icon>
      </div>
    </div>
    <div class="browser">
      <div class="browser-intro">推荐使用浏览器：</div>
      <div class="browser-cont">
        <div class="browser-icon"><v-icon large>$vuetify.icons.edge</v-icon></div>
        <div class="browser-icon"><v-icon large>$vuetify.icons.chrome</v-icon></div>
        <div class="browser-icon"><v-icon large>$vuetify.icons.firefox</v-icon></div>
        <div class="browser-icon"><v-icon large>$vuetify.icons.san60</v-icon></div>
        <div class="browser-icon"><v-icon large>$vuetify.icons.sougou</v-icon></div>
      </div>
    </div>
  </div>
</template>

<script>
import { addRoom, getRoom } from '@/api/room.js'
export default {
  data() {
    return {
      createRoomDialog: false,
      roomTime: 2,
      enterRoomDialog: false,
      roomId: '',
      createdRoomId: '',
      createdRoomInfo: {},
      joinRoomId: '',
      joinRoomInfo: {}
    }
  },
  mounted() {},
  methods: {
    openJoinMeetingDialog() {
      this.enterRoomDialog = true
      setTimeout(() => {
        this.$refs.roomId.focus()
      }, 300)
    },
    verifyRoomTime() {
      this.$nextTick(() => {
        if (parseInt(this.roomTime) > 12) {
          this.roomTime = 12
        }
        if (parseInt(this.roomTime) === 0) {
          this.roomTime = 1
        }
      })
    },
    createRoom() {
      if (!this.roomTime) {
        this.$toast.error('请填写会议时长')
        return
      }
      addRoom({roomTime: this.roomTime})
        .then(res => {
          if (res.data.msg === '此用户已经创建过房间') {
            this.$toast.warn(res.data.msg + ', 即将自动进入房间')
          } else {
            this.$toast.success(res.data.msg + ', 即将自动进入房间')
          }
          this.createdRoomId = res.data.data.roomId
          this.createdRoomInfo = res.data.data.roomInfo
          setTimeout(() => {
            this.$router.push({name: 'room', params: {id: this.createdRoomId}})
          }, 400)
        })
        .catch(err => err)
    },
    createMeeting() {
      this.$router.push({ name: 'room' })
    },
    enterRoom() {
      getRoom({roomId: this.roomId})
        .then(res => {
          this.$toast.success('即将自动进入房间')
          this.joinRoomId = res.data.data.roomId
          this.joinRoomInfo = res.data.data.roomInfo
          setTimeout(() => {
            this.$router.push({name: 'room', params: {id: this.joinRoomId}})
            this.roomId = '' 
            this.$refs.roomId.focus()
          }, 400)
        })
        .catch(() => {
          this.roomId = ''
          this.$refs.roomId.focus()
        })
    }
  }
}
</script>

<style scoped>
.wrap {
  padding: 50px 80px 60px 80px;
  width: 100%;
  min-height: 100vh;
  background: rgb(248, 248, 248);
}
.intro {
  width: 100%;
  font-size: 84px;
  user-select: none;
}
.intro-text {
  color: #38414b;
  font-weight: bold;
}
.intro-emo {
  font-size: 96px;
}
.meeting-oper {
  display: flex;
  margin: 60px 0 0 4px;
  width: 100%;
}
.create-meeting {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 350px;
  border: 4px dashed grey;
  border-radius: 30px;
  background: #e7e7e7;
}
.create-meeting:hover {
  cursor: pointer;
}
.join-meeting {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 40px;
  width: 600px;
  height: 350px;
  background: #1565c0;
  border-radius: 30px;
}
.join-meeting:hover {
  cursor: pointer;
}
.browser {
  display: flex;
  align-items: center;
  margin: 60px 0 0 10px;
  user-select: none;
}
.browser-intro {
  color: #38414b;
  font-size: 28px;
  font-weight: bold;
}
.browser-cont {
  display: flex;
}
.browser-icon {
  margin: 0 15px 0 0;
}
</style>
